<template>
  <div class="register">
    <div class="register-header">
      <img v-if="logo" :src="logo" class="register-header-logo" />
      <h3 style="margin-top: 2px;margin-left: 10px;float: left;">智箱界供应链平台</h3>
      <!-- <span style="margin-right: 10%;float: right;">客服专线：4000-466-600（工作日9:00-18:00）</span> -->
    </div>

    <div class="register-container">
      <el-row>
        <el-col :span="12">
          <div>
            <span style="background-color: #2158F3;font-size: 12px;">&nbsp</span>
            &nbsp企业注册
          </div>
        </el-col>
        <el-col :span="12">
          <div style="float: right;">
            已有账号？<router-link to="/login" style="color: cornflowerblue;">立即登录</router-link>
          </div>
        </el-col>
      </el-row>

      <div style="width: 80%;margin: 50px ;min-height:1000px;">
        <!-- <el-steps style="min-width: 600px;margin: auto;width: 100%;" :active="active" process-status="wait" align-center
          size="small">
          <el-step title="企业实名认证" />
          <el-step title="法定代表人认证" />
          <el-step title="管理员认证" />
        </el-steps> -->
        <el-form ref="registerRef" :model="registerForm" :rules="registerRules" label-width="150px"
          label-position="right" style="margin:auto; width: 600px;margin-top: 100px;">
          <el-form-item label="登陆账号" prop="username">
            <el-input v-model="registerForm.username" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="登陆密码" prop="password">
            <el-input v-model="registerForm.password" size="large" show-password placeholder="请输入" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="registerForm.confirmPassword" size="large" show-password placeholder="请输入" />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="registerForm.mobile" size="large" type="text" placeholder="请输入">
              <template #prepend>
                <el-select v-model="registerForm.select" size="large" style="width: 200px">
                  <el-option label="中国大陆 +86" value="1" />
                  <el-option label="哈萨克斯坦 +7" value="2" />
                  <el-option label="德国 +49" value="3" />
                  <el-option label="乌兹别克斯坦 +998" value="4" />
                  <el-option label="俄罗斯 +7" value="5" />
                  <el-option label="俄罗斯 +8" value="6" />
                  <el-option label="白俄罗斯 +375" value="7" />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="registerForm.code" size="large" style="width: 63%" placeholder="请输入" />
            <div class="register-code">
              <el-button :disabled="countdownPhone > 0" type="primary" size="large" plain @click="getRegisterCode"
                style="margin-left: 10px;width: 100%;">{{ countdownPhone > 0 ? countdownPhone + '秒' : '验证码' }}</el-button>
            </div>
          </el-form-item>

          <el-form-item :label-width="0">
            <el-button :loading="loading" @click="handleRegister" type="primary" size="large"
              style="margin-top: 20px;width: 100%;">
              <span v-if="!loading">注 册</span>
              <span v-else>注 册 中...</span>
            </el-button>
          </el-form-item>
          <el-form-item :label-width="0">
            <el-checkbox v-model="registerForm.isAgree">
              <span style="font-size: 12px;">
                我已阅读并同意
                <a href="#">《智箱界供应链平台服务协议》</a>
                <a href="#">《用户隐私政策》</a>
              </span>
            </el-checkbox>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script setup>
import logo from '@/assets/logo/zxj-logo.png'
import { ElMessage, ElMessageBox } from "element-plus";
import { getCodeImg, register } from "@/api/login";
import { sms_code_identity, sms_code_conservator, sms_code_tourist } from '@/api/sms/index'
import { getUserData, registerTourist } from '@/api/user/index'
import { ref } from 'vue'

const registerForm = ref({
  username: "",
  password: "",
  confirmPassword: "",
  select: '1',
  mobile: "",
  code: "",
  isAgree: false
});

const next = () => {

}

const router = useRouter();
const { proxy } = getCurrentInstance();

const equalToPassword = (rule, value, callback) => {
  if (registerForm.value.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const registerRules = {
  username: [
    { required: true, trigger: "blur", message: "请输入您的账号" },
    { min: 3, max: 32, message: "用户账号长度必须介于 3 和 32 之间", trigger: "blur" },
    // { pattern: /^[a-zA-Z0-9_]+$/, message: "请输入大小写字母、数字、下划线", trigger: "blur" }
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" },
    { min: 8, max: 32, message: "用户密码长度必须介于 8 和 32 之间", trigger: "blur" },
    { pattern: /^[^<>"'|\\]+$/, message: "请输入大小写字母、数字、特殊符号", trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, trigger: "blur", message: "请再次输入您的密码" },
    { required: true, validator: equalToPassword, trigger: "blur" }
  ],
  mobile: [{ required: true, trigger: "blur", message: "请输入手机号" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

//注册
const loading = ref(false);
function handleRegister () {
  proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      if (!registerForm.value.isAgree) {
        return ElMessage.warning('请选择同意平台协议！')
      }
      loading.value = true;
      let dataInfo = {
        username: registerForm.value.username,
        password: registerForm.value.password,
        verifyPassWord: registerForm.value.confirmPassword,
        code: registerForm.value.code,
        mobile: registerForm.value.mobile,
      }
      registerTourist(dataInfo).then(res => {
        const username = registerForm.value.username;
        ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
          dangerouslyUseHTMLString: true,
          type: "success",
        }).then(() => {
          router.push("/login");
        }).catch(() => { });
      }).catch(() => {
        ElMessage.error('抱歉哦！注册失败')
        loading.value = false;
      });
    }
  });
}

function getRegisterCode () {
  const data = {
    "mobile": registerForm.value.mobile
  }
  sms_code_tourist(data).then(res => {
    ElMessage.success("验证码发送成功！");
    sendVerificationCode()
  });
}
// 倒计时的秒数
const countdownPhone = ref(0);

// 发送验证码函数
const sendVerificationCode = () => {
   // 如果倒计时已经开始，则直接返回
   if (countdownPhone.value > 0) return;

    // 设置倒计时为60秒
    countdownPhone.value = 60;
    // 启动定时器，每秒减少一秒
    const timer = setInterval(() => {
      countdownPhone.value--;
        // 当倒计时结束时，清除定时器
        if (countdownPhone.value === 0) {
          clearInterval(timer);
        }
    }, 1000)
  
}
function getCode () {
  // getCodeImg().then(res => {
  //   captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
  //   if (captchaEnabled.value) {
  //     codeUrl.value = "data:image/gif;base64," + res.img;
  //     registerForm.value.uuid = res.uuid;
  //   }
  // });
}

// getCode();
</script>

<style lang='scss' scoped>
a {
  text-decoration: underline;
  color: #409eff;
}

.register {
  width: 100%;
  min-height: 1000px;
  background-color: #eee;

  .register-header {
    width: 100%;
    height: 80px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
  }

  .register-container {
    width: 80%;
    min-width: 1000px;
    background-color: white;
    margin: auto;
    box-sizing: border-box;
    padding: 20px 30px;
    margin-top: 20px;
  }

  .register-header-logo {
    float: left;
    width: 100px;
    margin-left: 8%;
  }

  .register-code {
    width: 35%;
    height: 40px;
    float: right;
  }
}
</style>
